<template>
  <div class="login-container">
    <el-form ref="formRef" :model="form" class="login-form" :rules="rules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="username">
        <img src="@/assets/用户.png" class="login-icon" alt="" />
        <el-input v-model="form.username" class="login-input"> </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <img src="@/assets/锁定.png" class="login-icon" alt="" />
        <el-input
          v-model="form.password"
          class="login-input"
          :type="passwordType"
        ></el-input>
        <img
          id="eye"
          src="@/assets/眼睛.png"
          alt=""
          class="login-eye"
          @click="changePassword()"
        />
      </el-form-item>
      <el-button type="primary" class="login-button" @click="handleLogin()"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const form = ref({
  username: '',
  password: ''
})

const rules = ref({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 6, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change'
    }
  ]
})
const formRef = ref(null)
const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      store.dispatch('app/login', form.value)
    } else {
      console.log('error submit')
      return false
    }
  })
}
const passwordType = ref('password')
function changePassword() {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}
</script>
<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-color: rgb(43, 58, 75);
  position: relative;
  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    .title {
      color: rgb(246, 243, 246);
      font-size: 25px;
      text-align: center;
      margin: 0 0 40px 0;
    }
    /deep/.el-input__inner {
      margin: 0px auto;
      height: 50px;
      width: 550px;
      background-color: rgb(39, 52, 67);
      border: 0;
      border-radius: 5px;
      padding-left: 40px;
      font-size: 20px;
      color: rgb(141, 152, 167);
    }
    .svg-container {
      position: absolute;
      color: rgb(141, 152, 167);
      left: 15px;
      z-index: 1000;
    }
  }
  .login-button {
    width: 100%;
    height: 35px;
  }
  .login-eye {
    right: 20px;
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    z-index: 1000;
  }
  .login-icon {
    left: 10px;
    width: 20px;
    height: 20px;
    position: absolute;
    cursor: pointer;
    z-index: 1000;
  }
}
</style>
